<template>
  <div class="detail" v-if="storeInfo">
    <header>
      <van-icon name="arrow-left" size="25px" @click="back" />
      <ul>
        <li v-for="(item, index) in header" :key="index">
          <span :class="i == index ? 'active' : ''" @click="tab(index)">{{
            item
          }}</span>
        </li>
      </ul>
    </header>
    <main>
      <div class="showimg">
        <img :src="storeInfo.image" alt="" />
      </div>
      <div class="msg">
        <div class="price">
          <h2>￥{{ storeInfo.price }}</h2>
          <div class="vipprice">
            <span>￥{{ storeInfo.vip_price }}</span>
            <img src="@/assets/image/vip.png" alt="" />
          </div>
          <i class="iconfont icon-huodongtuiguang"></i>
        </div>
        <div class="info">
          <h2>{{ storeInfo.store_info }}</h2>
        </div>
        <div class="more">
          <ul>
            <li>原价：￥{{ storeInfo.price }}</li>
            <li>库存：{{ storeInfo.stock }}{{ storeInfo.unit_name }}</li>
            <li>销量：{{ storeInfo.sales }}</li>
          </ul>
        </div>
      </div>
      <div class="comment">
        <p>用户评价</p>
        <p><span>0%</span>好评率></p>
      </div>
      <div class="goods">
        <div class="title">
          <van-divider
            :style="{
              color: '#f44f21',
              borderColor: '#f44f21',
              padding: '0 16px',
              fontSize: '18px',
              lineHeight: '50px',
            }"
          >
            优品推荐
          </van-divider>
        </div>
        <ul>
          <li v-for="item in goodsList" :key="item.id">
            <router-link to="/">
              <img :src="item.image" @error="change1($event)" />
              <div>
                <p class="info">{{ item.store_name }}</p>
                <p class="price">￥{{ item.price }}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="introduce">产品介绍</div>
      <div class="detailmsg" v-html="storeInfo.description"></div>
    </main>
    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#9926f7" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="tocart"
          :badge="cartlen"
        />
        <van-goods-action-icon icon="star-o" text="收藏" />
        <!-- <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" /> -->
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCart(storeInfo)"
          v-if="!iscart"
        />
        <van-goods-action-button
          :disabled="false"
          text="已加入购物车"
          v-if="iscart"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          color="#9926f7"
        />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import { get } from "../../utils/util";
import { mapState, mapMutations } from "vuex";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      header: ["商品", "评价", "推荐", "详情"],
      i: 0,
      showheader: false,
      id: null,
      storeInfo: null,
      goodsList: [],
      scrollTop: 0,
      iscart: false,
      cartlen: 0,
      cartList: null,
    };
  },
  watch: {
    cartList() {
      console.log();
      this.cartlen = this.cartList.length;
    },
  },
  methods: {
    ...mapMutations(["saveCart"]),
    tocart() {
      this.$router.push("/cart");
    },
    tab(i) {
      this.i = i;
      let st = document.documentElement.scrollTop || document.body.scrollTop;
      if (this.i == 0) {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }
      if (this.i == 1) {
        window.scrollTo({
          top: 672,
          behavior: "smooth",
        });
      }
      if (this.i == 2) {
        window.scrollTo({
          top: 740,
          behavior: "smooth",
        });
      }
      if (this.i == 3) {
        window.scrollTo({
          top: 1000,
          behavior: "smooth",
        });
      }
    },
    back() {
      this.$router.go(-1);
    },
    scroll() {
      let st = document.documentElement.scrollTop || document.body.scrollTop;
      if (st >= 0 && st < 672) {
        this.i = 0;
      }
      if (st >= 672) {
        this.i = 1;
      }
      if (st >= 740) {
        this.i = 2;
      }
      if (st >= 1000) {
        this.i = 3;
      }
    },
    addCart(storeInfo) {
      // console.log(storeInfo);
      Toast.success("添加成功");
      let obj = {};
      obj.id = storeInfo.id;
      obj.image = storeInfo.image;
      obj.store_name = storeInfo.store_name;
      obj.price = storeInfo.price;
      obj.nums = 1;
      obj.check = false;
      obj.itemPrice = storeInfo.price;
      this.saveCart(obj);
      this.iscart = true;
    },
    change1(e) {
      e.target.src = require("@/assets/image/error.png");
      // console.log(e.target.src="../assets/images/book-gray.png");
    },
  },
  created() {
    this.id = this.$route.query.id;
    get("/product/detail/" + this.id).then((res) => {
      console.log(res);
      this.storeInfo = res.data.storeInfo;
      this.goodsList = res.data.good_list;
      let cartList = JSON.parse(localStorage.getItem("saveCart"));

      if (cartList) {
        this.cartList = cartList;
        cartList.forEach((element) => {
          if (element.id == this.storeInfo.id) {
            this.iscart = true;
          }
        });
      }
    });
  },
  mounted() {
    window.onscroll = this.scroll;
  },
};
</script>
<style lang="scss" scoped>
.detail {
  background-color: #f5f5f5;
  margin-bottom: -50px;
  overflow: hidden;
}
header {
  z-index: 2;
  background-color: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  ul {
    width: 100%;
    display: flex;
    li {
      font-size: 18px;
      flex-grow: 1;
      span {
        padding: 5px 0;
      }
      .active {
        border-bottom: 2px solid #9926f7;
      }
    }
  }
}
main {
  padding-top: 50px;
  .showimg {
    width: 100%;
    height: 420px;
    img {
      width: 100%;
      height: 420px;
    }
  }
  .msg {
    background-color: #fff;
    font-size: 14px;
    .price {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      h2 {
        font-size: 30px;
        color: #fc4141;
      }
      .vipprice {
        height: 50px;
        display: flex;
        align-items: flex-end;
        margin-left: -50px;
        span {
          font-weight: bold;
          font-size: 14px;
        }
        img {
          vertical-align: bottom;
          width: 30px;
          height: 20px;
        }
      }
      i {
        display: block;
        align-self: flex-start;
        margin-right: 10px;
        padding-top: 10px;
      }
    }
    .info {
      padding: 0 10px;
      box-sizing: border-box;
      h2,
      h3 {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .more {
      padding: 0 10px;
      box-sizing: border-box;
      ul {
        display: flex;
        height: 60px;
        line-height: 60px;
        li {
          flex-basis: 33.3%;
          font-size: 12px;
          color: #aaa;
        }
      }
    }
  }
  .comment {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    margin: 10px 0;
    p {
      font-size: 14px;
    }
  }
}
.goods {
  overflow: hidden;
  background-color: #fff;
  height: 220px;
  .title {
    height: 50px;
    line-height: 50px;
  }
  ul {
    padding-bottom: 60px;
    display: flex;
    overflow-x: scroll;
    height: 50%;
    li {
      flex: 0;
      margin-right: 30px;
      width: 100px;
      a {
        width: 100%;
        height: 100%;
        display: block;
        // display: flex;
        font-size: 14px;
        img {
          width: 100px;
          height: 100px;
        }
        > div {
          width: 100%;
        }
        .info {
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .price {
          font-size: 18px;
          color: #fc4141;
        }
      }
    }
  }
}
.introduce {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  margin: 10px 0;
}

.detailmsg {
  width: 100vw;
  font-size: 14px;
  p {
    width: 100% !important;

    img {
      max-width: 100vw !important;
    }
  }
}
</style>